<template>
	<view class="main-content">
		<view class='bg-white row pr20'>
			<u-search :show-action="true" v-model="keyword" action-text="搜索" :animation="true"></u-search>
			<u-button class="search-button" type="primary" size="medium" @click="searchSite">搜索</u-button>
		</view>
		<view class="site-list bg-white" v-if="list.length > 1">
			<view class="item row mt5" v-for="(v,k) in list" @click="returnSiteEditPage(v)">
				<view class="icon-display-area">
					<view class="icon"></view>
				</view>
				<view class="site-information">
					<text class="title sm line1" v-text="v.title"></text>
					<text class="address xs mt5 mb10 line1" v-text="v.address"></text>
				</view>
			</view>
		</view>
		<u-empty v-if="list.length <= 0" text="请输入关键词" mode="search"></u-empty>
	</view>
</template>

<script>
	import {
		keywordSearch
	} from '@/api/user'
	export default {
		data() {
			return {
				keyword:'',
				list:[],
				page:1,
				region:'太原'
			};
		},
		methods:{
			searchSite(){
				var _this = this;
				keywordSearch({
					keyword:_this.keyword,
					region:_this.region,
					page:_this.page,
				}).then(res => {
					if(res.status == 0){
						_this.list = res.data;
					}
				})
			},
			returnSiteEditPage(e){
				var data = {};
				data.ad_info = {};
				data.ad_info.province = e.province;
				data.ad_info.city = e.city;
				data.ad_info.district = e.district;
				data.title = e.title;
				data.address = e.address;
				data.location = {};
				data.location.lng = e.location.lng;
				data.location.lat = e.location.lat;
				uni.setStorageSync('now_selected_site_information', JSON.stringify(data));
				uni.navigateBack({
					delta: 2
				});
			}
		}
	}
</script>

<style lang="scss">
	uni-page-body{
		height: 100%;
	}
	.pr20{
		padding-right: 20rpx;
	}
	.main-content{
		height: calc(100% - 50px);
		
		.search-button{
			height: 50rpx;
			padding: 0 30rpx;
			line-height: 50rpx;
			border-radius: 100rpx;
			background-color: #4e87fc;
		}
		
		.site-list{
			padding: 10rpx 0 10rpx 30rpx;
			
			.item{
				border-bottom: 1px solid #eee;
				&:last-child{
					border-bottom: none;
				}
				
				&:first-child{
					.site-information{
						
						.title{
							color: #4e87fc;
							font-weight: bold;
						}
					}
				}
				
				.icon-display-area{
					width: 6%;
					
					.icon{
						width: 10rpx;
						height: 10rpx;
						border: 8rpx solid #ddd;
						border-radius: 50%;
						// margin: 0 auto;
					}
				}
				
				.site-information{
					width: 94%;
					
					.title{
						width: calc(75%);
						display: block;
					}
					
					.address{
						width: calc(75%);
						display: block;
						color: #8e8e8e;
					}
				}
			}
		}
	}
</style>
